<template>
  <div class="map">
    <h1 style="text-align: center;color: #fff;">黑风山</h1>
    <WuKong 
    v-for="(item,index) in wukongList" 
    :key="index"
    :x="item.x"
    :y="item.y"
    :npcname="item.npcname"
    @click="wukongList++"
    ></WuKong>

    <JCZL :x="jczl.x" :y="jczl.y"></JCZL>
  </div>
</template>

<script>
import WuKong from "@/components/game/wukong.vue";
import JCZL from "@/components/game/jczl.vue";
export default {
  name: 'day6',
  components: {
    WuKong,
    JCZL
  },
  mounted() {
      //判断大小jczl 定时让 jczl靠近 天命人 每次1像素
      setInterval(()=>{
        if(this.jczl.x<this.wukongList[0].x){
            this.jczl.x++
        }else if(this.jczl.x>this.wukongList[0].x){
            this.jczl.x--
        }
        if(this.jczl.y<this.wukongList[0].y){
            this.jczl.y++
        }else if(this.jczl.y>this.wukongList[0].y){
            this.jczl.y--
        }
      },1)
  },
  data() {
    return {
        jczl:{
            x:Math.random()*window.innerWidth,
            y:Math.random()*window.innerWidth
        },
        wukongList:[
            {npcname:"天命人",x:100,y:100},
            {npcname:"毛",x:500,y:500}
        ]
    }
  }
}
</script>

<style scoped>
.map{
    width: 100%;
    height: calc(100vh);
    background-color: black;
}
</style>